<template>
    <div class = 'review'>
        <h2 class="tit">健康讲堂直播详情</h2>
        <!-- 头部数据 -->
        <header class="main">
            <div class = 'title'>
                <p>直播数据</p>
            </div>
            <span class="tishi">(直播完成回来查看具体数据)</span>
            <div class = 'liveList'>
                <div class = 'liveTime'>
                    <img src="@/assets/images/time.png" alt="">
                    <div class = 'liveDate'>
                        <span>直播时长</span>
                        <span>{{ liveBroadDate.time }}</span>
                    </div>
                </div>
                <div class = 'liveTime'>
                    <img src="@/assets/images/eye.png" alt="">
                    <div class = 'liveDate'>
                        <span>观看人次</span>
                        <span>{{ liveBroadDate.Visitors }}</span>
                    </div>
                </div>
                <div class = 'liveTime'>
                    <img src="@/assets/images/xin.png" alt="">
                    <div class = 'liveDate'>
                        <span>关注人次</span>
                        <span>{{ liveBroadDate.manTime }}</span>
                    </div>
                </div>
                <div class="btn">
                    <Button type="primary" style='height:40px;cursor: pointer;text-align:right' :disabled="!(this.playStatus == 2 || this.playStatus == 5 || this.playStatus == 6)" icon="refresh" @click='refreshHeadDate'><span>刷新</span></Button>
                </div> 
            </div>
        </header>
        <div  v-show='playStatus'>         
            <div class="main">
               <p class="title">直播状态</p> 
               <div class = 'information'>
                   <div class = 'information_item'>
                        <span style='color:#ff9966;'>状态：{{statueName}}</span>
                    </div>
                    <!-- 审核人 -->
                    <!-- playStatus != 1 && playStatus != 7 && playStatus != 8 -->
                    <div class = 'information_item' v-if='auditorName'>
                        <p >审核人：{{ auditorName }}</p>
                    </div>
                    <!-- 待开播 -->
                    <div class = 'information_item' v-if='playStatus == 2'>
                        <span>倒计时：</span>
                        <span v-if="sdateName != '00天00小时00分钟00秒'">{{ sdateName }}</span>
                        <span v-else>即将开始直播</span>
                    </div>
                    <div class = 'information_item' v-if='playStatus == 2'>
                        <span>预计直播时长：</span>
                        <span>{{ liveStart(date) }}</span>
                    </div>                   
               </div>                
            </div>
            <!-- 基本信息 -->
            <div class="main">                 
                <p class="title">基本信息</p>
                <div class = 'information'>
                    <div class = 'information_item'>
                        <span>直播标题：{{params.title}}</span>
                    </div>
                    <div class = 'information_item'>
                        <span>直播医生：{{params.doctorName}}</span>
                    </div>
                    <div class = 'information_item'>
                        <span>直播封面：</span>
                        <img :src="params.headImg" title="点击查看大图" alt="暂无图片" class="image" @click='modal2=true' v-if='params.headImg'>
                        <span v-if='!params.headImg'>暂无封面</span>
                    </div>
                    <div class = 'information_item'>
                        <span>预计直播时间：{{params.aboutStartTime}}</span>
                    </div>
                    <div class = 'information_item'>
                        <span>预计结束：{{params.aboutEndTime}}</span>
                    </div>
                    <div class = 'information_item'>
                        <span>直播列表图：</span>
                        <img :src="params.listImg" title="点击查看大图" alt="暂无图片" class="image listimage" @click='modal3=true' v-if='params.listImg'>
                        <span v-if='!params.listImg'>暂无列表图</span>
                    </div>
                    <div class = 'information_item' v-if='playStatus == 4 || playStatus == 5 || playStatus == 6 || playStatus == 8'>
                        <span>直播开始时间：{{params.liveStartTime}}</span>
                    </div>
                </div>
            </div>
            <!-- 设置信息 -->
            <div class="main">
               <p class="title">设置信息</p>
                <div class = 'information'>
                    <div class = 'information_item'>
                        <span>直播形式：{{params.liveForm}}</span>
                    </div>
                    <div class = 'information_item'>
                        <span>直播类型：{{params.liveType}}</span>
                    </div>
                    <div class = 'information_item'>
                        <span>课堂类型：{{params.columnName}}</span>
                    </div>
                    <div class = 'information_item'>
                        <span>是否收费：{{params.icharge}}</span>
                    </div>
                    <div class = 'information_item'>
                        <span>原始价格：{{params.originalPrice}}</span>
                    </div>
                    <div class = 'information_item'>
                        <span>折后价格：{{params.discountPrice}}</span>
                    </div>
                    <div class = 'information_item'>
                        <span>推广力度：{{params.fictitiousNum ? params.fictitiousNum : '无'}}</span>
                    </div>
                    <div class = 'information_item'>
                        <span>销售数量：{{ params.stock ? params.stock : '0' }}</span>
                    </div>
                </div>
            </div>
            <!-- 课堂介绍 -->
            <div class="main">
                <p class="title">课堂介绍</p>
                <div class='information'>
                    <p style="display:block;margin:10px 0;">讲堂介绍：{{ params.classIntroduction ? params.classIntroduction :"无"  }}</p>
                </div>
            </div> 
            <!-- 不通过原因 -->
            <div class="main" v-if='playStatus == 3 || playStatus == 4 || playStatus == 8'>
                <p class="title">审核原因</p>
                <div class='information' >
                    <p style='color:red;'>{{ params.reason }}</p>
                </div>
            </div>                        
        </div>
        <div class="buttonbox">
            <!-- 直播中warning -->
            <!-- <Button type="primary" v-if='playStatus == 5' @click='enterLive'>进入直播间</Button> -->
            <!-- 审核中 -->
            <Button type="warning" v-if='playStatus == 1' @click='changeStatusBack(7)'>
                <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>撤回
            </Button>
            <!-- 审核未通过 -->
            <Button  type="primary"  @click='edit' v-if='playStatus == 3'>重新提交</Button>
            <Button @click='reback'>
                <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
            </Button>
        </div>
        <Modal v-model="modal2" width="600" footer-hide>
            <img :src="params.headImg" alt="" style='display:block;width:100%'>
        </Modal>
        <Modal v-model="modal3" width="600" footer-hide>
            <img :src="params.listImg" alt="" style='display:block;width:100%'>
        </Modal>
    </div>
</template>
<script>
import api from "@/api/commonApi";
export default {
    data () {
        return {
            modal2: false,
            modal3: false,
            auditorName: "",
            sdate: "",
            sdateName: "00天00小时00分钟00秒",
            date: "00天00小时00分钟00秒",
            params: {
                // 标题
                title:"",
                // 介绍
                classIntroduction:"",
                // 医生姓名 
                doctorName:"",
                // 直播时间
                aboutStartTime:"",
                // 结束时间
                aboutEndTime:"",
                // 图片
                headImg:"",
                listImg:"",
                // 是否收费
                icharge:"",
                // 直播形式
                liveForm:"",
                // 推广力度
                fictitiousNum:"",
                // 课堂类型
                type:"",
                // 直播类型
                liveType:"",
                // 状态
                playStatus:"",
                // 不通过原因
                reason:"",
                // 原始价格
                originalPrice:"",
                //折后价格
                discountPrice:"",
                id:"",
                // 真实开始直播时间
                liveStartTime:"",
                //销售数量
                stock:""

            },
            // 直播类型
            liveTypeList: [
                {
                    id:"0",
                    name:"医师讲堂"
                },
                // {
                //     id:"1",
                //     name:"医学讲堂"
                // }
            ],
            // 直播形式
            liveListForm: [
                {
                    id:"0",
                    name:"轻直播"
                },
                {
                    id:"1",
                    name:"语音直播"
                },
                {
                    id:"2",
                    name:"视频直播"
                },
            ],
            // 课堂类型
            columnList: [],
            playStatus: "",
            // 状态列表
            livexsList: [
                {
                    id:"1",
                    name:"待审核"
                },
                {
                    id:"2",
                    name:"审核通过"
                },
                {
                    id:"3",
                    name:"审核未通过"
                },
                {
                    id:"4",
                    name:"下架"
                },
                {
                    id:"5",
                    name:"正在直播"
                },
                {
                    id:"6",
                    name:"已完成"
                },
                {
                    id:"7",
                    name:"已撤回"
                },
                {
                    id:"8",
                    name:"已关闭"
                }
            ],
            statueName: '',
            liveTime: "",
            liveBroadDate:{
                time: "暂无数据" ,
                Visitors: "暂无数据",
                manTime:"暂无数据"

            },
            thisType:''
        }
    },
    created () {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/operation/contentmanagement_home",
                title: "患者端运营"
            },
            {
                path: "/index/publicOperation/liveMant/list",
                title: "健康讲堂"
            }
        ];
        this.$emit("changeBreadList", breadList);
        this.columnDate();
    },
    mounted () {
        // 加载直播详情
        this.getLiveData();
    },
    methods: {
        // 返回
        reback(){
            let query = this.$route.query;
             this.functionJS.queryNavgationTo(
                this,
                "/index/publicOperation/liveMant/list",
                query
            );
        },
        // 加载课堂类型
        columnDate() {
            this.$axios.post(api.findLectureColumnList,{}).then(resp => {
                if (resp.data.success) {
                    let ret = resp.data.object;
                    this.columnList = ret;
                } else {
                    this.$Message.error("请求失败,请稍候重试");
                }
            });
        },
        // 撤回操作
        changeStatusBack (val) {
            let params = {}
            if(Number(val) == 7) {
                params.id = this.params.id,
                params.playStatus = val
            }
            this.$axios.post(api.updateLiveStatus, params).then(res => {
                if(res.data.success) {
                    this.$Message.success("撤回成功")
                    this.playStatus = 7;
                    this.getLiveData();
                }else {
                    this.$Message.error("撤回失败")
                }
            })
        },
        // 跳转到修改
        edit () {
            let query = this.$route.query;
            this.functionJS.queryNavgationTo(
                this,
                "/index/publicOperation/liveMant/broadEdit",
                query
            );
        },
        // 查询健康直播数据
        refreshHeadDate () {
            let query = this.$route.query;
            let url = api.findCountLecture;
            let params = {
                id : query.id
            }
            if(this.playStatus == 2 || this.playStatus == 5 || this.playStatus == 6) {
                this.$axios.post(url, params).then(res => {
                    if(res.data.success) {
                        let ret = res.data.object;
                        console.log(ret);
                        this.liveBroadDate.time = this.formatSeconds(ret.liveTime);
                        this.liveBroadDate.Visitors = ret.countWatch;
                        this.liveBroadDate.manTime = ret.countFollow;
                    }
                })
            } else {
                this.$Message.info("请检查直播状态")
            }
        },
        // 加载直播详情数据
        getLiveData(){
            let query = this.$route.query;
            this.$axios.post(api.findLectureById, {
                id:query.id
            }).then(resp => {
                if(resp.data.success) {
                    let ret = resp.data.object;
                    console.log(ret);
                    this.playStatus = ret.playStatus
                    // 通过直播状态加载直播数据
                    if(this.playStatus == 2 || this.playStatus == 5 || this.playStatus == 6) {
                        // console.log('加载直播数据');
                        this.refreshHeadDate ()
                    }
                    this.livexsList.forEach(item =>{
                        if(Number(item.id) == Number(ret.playStatus)) {
                            this.statueName = item.name
                        }
                    })
                    this.sdate = ret.countLiveTime || 0
                    this.date = ret.liveTimeLength || 0
                    this.sdateName = this.liveStart(this.sdate)
                    this.prevDate();
                    // 不通过原因
                    this.params.reason = ret.reason
                    // 标题
                    this.params.title = ret.title
                    // 介绍
                    this.params.classIntroduction = ret.classIntroduction
                    // 医生姓名 
                    this.params.doctorName = ret.doctorName
                    // // 直播时间
                    this.params.aboutStartTime = ret.aboutStartTime
                    // // 结束时间
                    this.params.aboutEndTime = ret.aboutEndTime
                    // 直播开始时间
                    this.params.liveStartTime = ret.liveStartTime
                    // // 图片
                    this.params.headImg = ''  
                    this.params.listImg = ''  
                    if (ret.headImg) {
                        this.params.headImg = this.fileBaseUrl + this.pictureFormat(ret.headImg)
                    }
                    if (ret.listImg) {
                        this.params.listImg = this.fileBaseUrl + this.pictureFormat(ret.listImg)
                    }
                    // // 是否收费
                    this.params.icharge = ret.icharge ==0 ? "免费" : "收费"
                    // 原始价格
                    this.params.originalPrice = ret.originalPrice || 0
                    //折后价格
                    this.params.discountPrice = ret.discountPrice || 0
                    // id
                    this.params.id = ret.id;
                    // // 直播形式
                    let liveFrom =''
                    this.liveListForm.forEach(item => {
                        if(Number(item.id) == Number(ret.liveForm)) {
                            liveFrom = item.name
                        }
                    })
                    this.thisType = ret.liveForm
                    this.params.liveForm = liveFrom
                    // // 推广力度
                    this.params.fictitiousNum = ret.fictitiousNum
                    // // 直播类型
                    let liveType = ''
                    this.liveTypeList.forEach(item => {
                        if(Number(item.id) == Number(ret.liveType)) {
                            liveType = item.name
                        }
                    })
                    this.params.liveType = liveType
                    let type = ''
                    this.columnList.forEach(item =>{
                        if(Number(item.id) == Number(ret.columnId)) {
                            type = item.name
                        }
                    })                    
                    this.params.columnName = ret.columnName
                    this.auditorName = ret.auditorName
                    this.params.stock = ret.stock;
                } else {
                    this.$Message.error("加载详情失败");
                }
            })
        },
        // 倒计时未开播时间
        prevDate () {
            let timer = setInterval(() => {
                let currentDate = this.liveStart(this.sdate)
                this.sdateName = currentDate
                if (this.sdate < 1000) {
                    clearInterval(timer);
                }
                this.sdate = this.sdate - 1000;
            }, 1000)
        },
        // 毫秒数转时间
        liveStart(num){
            let time = parseInt(num)
            let dtime = time / 1000
            // 天数
            let day = parseInt((dtime / 3600) / 24)
            let daytime = parseInt(dtime - ((day * 3600) * 24))
            // console.log("天数",day);
            // 小时
            let hours = parseInt(daytime / 3600)
            let hourstimer = parseInt(daytime - hours * 3600)
            // console.log('小时',hours);
            // 分钟
            let mintimer = parseInt(hourstimer / 60)
            // console.log('余下分钟',mintimer);
            // 秒
            let mins = parseInt(hourstimer - mintimer * 60)
            // console.log("剩下的秒数",mins);
            function addZero (num) {
                if(num < 10) {
                    return '0' + num
                }
                return num
            }
            let timers =  addZero(day) + '天' + addZero(hours) +"小时" + addZero(mintimer) + '分钟' + addZero(mins) + '秒'
            if(time < 0) {
                timers = '00天00小时00分钟00秒'
            }
            return timers
        },
        // 秒数转时间
        secondsToDate(num){
            let time = parseInt(num)
            let dtime = time
            // 天数
            let day = parseInt((dtime / 3600) / 24)
            let daytime = parseInt(dtime - ((day * 3600) * 24))
            // console.log("天数",day);
            // 小时
            let hours = parseInt(daytime / 3600)
            let hourstimer = parseInt(daytime - hours * 3600)
            // console.log('小时',hours);
            // 分钟
            let mintimer = parseInt(hourstimer / 60)
            // console.log('余下分钟',mintimer);
            // 秒
            let mins = parseInt(hourstimer - mintimer * 60)
            // console.log("剩下的秒数",mins);
            function addZero (num) {
                if(num < 10) {
                    return '0' + num
                }
                return num
            }
            let timers =  addZero(day) + '天' + addZero(hours) +"小时" + addZero(mintimer) + '分钟' + addZero(mins) + '秒'
            if(time < 0) {
                timers = '00天00小时00分钟00秒'
            }
            return timers
        },
        // 进入直播间
        enterLive () {
            // if(this.thisType != 2) {
            //     this.$Message.error("仅有视频直播可进入直播间")
            //     return ''
            // }
            let query = this.$route.query;
            this.functionJS.queryNavgationTo(
                this,
                "/index/operation/liveMant/broadlookLive",
                query
            );
        },
        // 转换秒数
        formatSeconds (value) {
            var theTime = Number(value);// 秒  
            var theTime2 = 0;// 小时  
            var oldTheTime2 = theTime - parseInt(theTime / 3600)
            var theTime1 = 0;// 分  
            var oldTheTime1 = parseInt(oldTheTime2 / 60)
            var oldSection = parseInt(oldTheTime1 % 60)
            theTime2 = parseInt(theTime / 3600);
            theTime1 = parseInt(oldTheTime2 / 60);
            let result = theTime2 + '小时' + theTime1 + "分钟" + oldSection +"秒";
            return result;  
        }
    }
}
</script>
<style lang="less" scoped>
.review{
    width: calc(100%);
    margin: 0 auto;
    font-size: 12px;
    background-color: #fff;
    .tit {
        margin:10px 0;
        font-weight:bold;
        text-align:center;
    }
    .main{
        width: 97%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
        .tishi {
            margin-left:30px;
            color: #ff9966;
        }
        .liveList{
            display:flex;
            flex-direction:row;
            position: relative;
            .liveTime{
                width: 15%;
                display:flex;
                flex-direction:row;
                align-items:center;
                padding:10px;
                margin: 0 100px;
                img{
                    border-radius:50%;
                    width:75px;
                    height: 75px;
                }
                .liveDate{
                    display:flex;
                    flex-direction: column;
                    margin-left:14px;
                    align-items:center;
                }
            }
            .btn{
                position: absolute;
                right: 20px;
                top: 0;
            }
        }
        .liveStatus{
            font-weight:bold;
        }
        h1{
            border-bottom:1px solid #f2f2f2;
            margin-bottom:10px;
            font-weight:bold;
        }
        h3{
            font-weight:bold;
        }
        .information{
            display:flex;
            flex-direction:row;
            flex-wrap: wrap;
            width:100%;
            margin-bottom: 10px;
            padding: 0 15px;
            .information_item{
                width:33%;
                height:auto;
                margin:10px 0;
                img{
                    width:100px;
                    height:60px;
                }
                .listimage {
                    width: 70px;
                    height: 70px;
                }
            }
        }
        .columnBox{
            display:flex;
            flex-direction:column;
            margin-left:20px;
            .uptimer{
                display:flex;
                flex-direction:row;
                align-items:center;
                font-size:14px;
                
            }
        }
    }
    .image {
        vertical-align: top !important; 
    }
    .title {
        font-size: 20px;
        padding-left: 15px;
        margin-bottom: 10px;
        color: #333;
        height: 40px;
        line-height: 40px;
        background: #ebedf8;         
    }
    .buttonbox {
        text-align: center;
        padding-bottom: 30px;
    }
}
</style>
